<template>
  <div id="user">
    <User_Top></User_Top>
    <div class="line"></div>
    <User_middle></User_middle>
    <div class="line"></div>
    <User_Bottom></User_Bottom>
  </div>
</template>

<script>
  import User_Top from "./User_Top";
  import User_middle from "./User_middle";
  import User_Bottom from "./User_Bottom";

  export default {
    name: "user",
    components:{
      User_Top,
      User_middle,
      User_Bottom
    }
  }
</script>

<style scoped>
#user{
  width: 94%;
  height: 200px;
  margin: 0 auto;
  border-radius: 8px;
  background-color: #a2a0a0;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
.line{
  width: 90%;
  margin: 2px auto;
  border-bottom: 2px solid #d2d2d0;
  border-radius: 50%;
}
</style>
